<%--
  Created by IntelliJ IDEA.
  User: dllo
  Date: 18/3/3
  Time: 下午3:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>商品管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-maizi.css"/>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="userlist" class="navbar-brand">Changwan</a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="userlist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
                <li class="active"><a href="shoplist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;商品管理</a></li>
                <li><a href="clublist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;俱乐部管理</a></li>
                <li><a href="gamelist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;比赛管理</a></li>
                <li><a href="masterlist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;大师管理</a></li>
                <li><a href="orderlist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;订单管理</a></li>
                <li><a href="photolist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;晒图管理</a></li>
                <li><a href="commentlist"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;评论管理</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">

                <li><a href="#bbs"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
            </ul>
        </div>
        <!--导航-->

    </div>
</nav>
<!--导航-->

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
                <a href="shoplist" class="list-group-item">商品管理</a>
                <a href="shopsearch" class="list-group-item active">商品搜索</a>
                <a href="" role="button"  class="list-group-item" data-toggle="modal" data-target="#myModal">添加商品</a>
            </div>
        </div>
        <div class="col-md-10">
            <div class="page-header">
                <h1>商品管理</h1>
            </div>
            <ul class="nav nav-tabs">
                <li>
                    <a href="shoplist">商品列表</a>
                </li>
                <li  class="active">
                    <a href="shopsearch">商品搜索</a>
                </li>
                <li>
                    <a href="" role="button" data-toggle="modal" data-target="#myModal">添加商品</a>
                </li>
            </ul>
            <form action="#" class="uesr_search" method="post">
                <div class="alert alert-info" role="alert">
                    <strong>技巧提示：</strong>
                    支持模糊搜索！
                </div>
                <div class="form-group">
                    <label for="name">商品名</label>
                    <input type="text" id="name" class="form-control" placeholder="请输入商品名">
                </div>
                <button type="button" class="btn btn-default" id="search">提交</button>
            </form>
            <table class="table">
                <thead id="head">
                <tr><th>ID</th><th>商品名称</th><th>商品简介</th><th>商品图片</th><th>商品价格</th><th>操作</th></tr>
                </thead>
                <tbody id="user">

                </tbody>
            </table>
        </div>
    </div>
</div>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <form action="/addshop" id="shop" method="post" enctype="multipart/form-data">
                <div class="modal-body">

                    <div class="form-group">
                        <label for="addname">商品名称</label>
                        <input type="text" id="addname" name="name" class="form-control" placeholder="商品名称">
                    </div>
                    <div class="form-group">
                        <label for="addintro">商品简介</label>
                        <input type="text" id="addintro" name="intro" class="form-control" placeholder="商品简介">
                    </div>
                    <div class="form-group">
                        <label for="addpic">请选择图片</label>
                        <input type="file" id="addpic" name="file" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="addprice">商品价格</label>
                        <input type="text" id="addprice" class="form-control" name="price" placeholder="商品价格">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input type="submit" class="btn btn-primary" id="sub">
                </div>
            </form>
        </div>
    </div>
</div>

<!--footer-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    Copyright&nbsp;©&nbsp;2017-2018&nbsp;&nbsp;www.changwan.com&nbsp;&nbsp;
                </p>
            </div>
        </div>
    </div>
</footer>
<!--footer-->


<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-3.2.1.js"></script>
<script>
    $(document).keypress(function(e) {
        // 回车键事件
        if(e.which == 13) {
            jQuery("#search").click();
        }
    });
    $("#search").click(function () {
        $("#user").empty();
        $.ajax({
            url:"searchshopname",
            type:"post",
            data:{
                name : $("#name").val()
            },
            success:function (result) {
                for (var i in result) {
                    //利用for循环给table添加行
                    var shop = result[i];
                    addNewTR(shop);
                }
            }
        })
    })

    function addNewTR(shop) {
        $("#user").append($("<tr><th scope=row>" + shop.sid + "</th><td>" + shop.sname + "</td>" +
                "<td>" + shop.sintro + "</td><td><img src='"+shop.spic+"' onload='if (this.width>50 || this.height>50) if (this.width/this.height>50/50) this.width=50; else this.height=50;'/></td><td>" + shop.sprice + "</td>" +
                "<td><div role=presentation class=dropdown>" +
                "<button " + "class= btn-default btn dropdown-toggle" + " data-toggle=dropdown href=# role=button aria-haspopup=true aria-expanded=false>" +
                "操作<span class=caret></span>" +
                "</button>" + "<ul class=dropdown-menu> " +
                "<li><a href=delshop?sid="+shop.sid+">删除</a></li> " +
                "<li><a href id='update' sid="+shop.sid+" role=button data-toggle=modal data-target=#myModal onclick='update(this)'>修改</a></li></ul> " +
                "</div></td></tr>"));
    }
    function update(a) {
        var id = $(a).attr("sid")
        $.ajax({
            url:"selectshop",
            type:"post",
            data:{
                sid:id
            },
            success:function (result) {
                var shop = result;
                $("#shop").attr("action","/addshop?sid="+shop.sid+"");
                $("#addname").val($("#addname").val()+shop.sname);
                $("#addintro").val($("#addintro").val()+shop.sintro);
                $("#addprice").val($("#addprice").val()+shop.sprice);
            }
        })
    }
</script>
</body>
</html>
